<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步 引入 vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
  <!-- 第三步 -->
  <div id="app">
      <!-- 在这个元素里面  那么vue 的语法 就能生效  实现 vue 语法生效的范围 -->
       <!-- {{}}  名字 插值表达式 -->
        <h1>  {{msg}}</h1>

        <h2>  {{num}}</h2>


  </div>

  {{msg}}

    <!-- 第二步  实例化 Vue 构造函数-->
    <script>
         new  Vue({
             el:'#app',//  让vue 的虚拟dom 挂载在html 的真实dom的哪个元素下去,
             data:{    //  定义vue的数据结构 固定写法
               msg:"hello vue  我来了",
               num:100

             }

         })

    </script>
</body>
</html>